<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">日常查房</block>
		</cu-custom>
		<view  class="scroll-outer" v-if="isHave" :style="style">
			<view  class="scroll">
					<view :class="{'changeColor':tabIndex==index}"  @click="changeTab(index,item)" class="scroll_inner" v-for="(item,index) in floorsList" :key="index">
						<view>{{item.floorName}}</view>
					</view>
			</view>
			<view class="scroll_rig" style="height:100%;">
				<scroll-view scroll-y="true" style="height:100%;">
				<view v-for="(item,index) in roomList" v-if="isRoom" class="scroll_rig_inner" @click="gotodeatils(item)" :key="index">
					<view class="person_img">
						<image src="../../../static/img/basics/u609.png" mode=""></image>
					</view>
					<view class="person_rig">
						<view class="person_tp">
							<view>
								{{item.roomName}}
							</view>
							<view class="person_bt">
								<view>
									<text class="right">昨日累计:</text>
									<text>{{item.yesterdayCheckCount}}次</text>
								</view>
								<view>
									<text class="right">本月累计:</text>
									<text>{{item.curMonthCheckCount}}次</text>
								</view>
							</view>
						</view>
						<view class="person_icon">
							<text class="lg text-gray cuIcon-right" ></text> 
						</view>
					</view>
				</view>
				<view v-if="!isRoom" class="no-data">
					暂无数据
				</view>
				
			</scroll-view>
			</view>
		</view>
		<view v-if="!isHave" class="no-data">
			<view class="inner">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0, //左側tab
				floorsList:[],//楼层
				roomList:[],//房间
				isHave:true ,//楼层
				isRoom:true, //房间
				CustomBar:this.CustomBar,//
				screenHeight:this.screenHeight,//
				item:''//当前 object
			}
		},
		onShow() {
			console.log(this.item,999)
			if(this.roomList!=''){
				this.changeTab(this.tabIndex,this.item)
			}
		},
		onLoad() {
			this.getFloors();
		},
		computed: {
			style() {
				var customBar= this.CustomBar;
				var screenHeight= this.screenHeight;
				var height = screenHeight - customBar
				var style = `height:${height}px;`;
				return style
			}
		},
		methods: {
			// GET /checkRoom/getRooms
				// 查看楼层
				getFloors(){
					this.$http('/care-service/checkRoom/getFloors','get',{teamId:uni.getStorageSync('teamId')}).then(res=>{
						const floors = res.data.data;
						if(floors.length==0){
							this.isHave = false
						}else{
							this.isHave = true
							this.floorsList = floors;
							this.getRooms(res.data.data[0].id);
							// 查看首个楼层下面的房间
						}
						
					});
				},
				// 查看房间floorId
				getRooms(floorId){
					this.$http('/care-service/checkRoom/getRooms','get',{teamId:uni.getStorageSync('teamId'),floorId:floorId}).then(res=>{
						if(res.data.code==200){
							this.roomList = res.data.data;
							if(this.roomList.length){
								this.isRoom =  true
							}else{
								this.isRoom = false
							}
						}
					});
				},
				changeTab(index,item){
					this.tabIndex = index;
					this.item = item
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak(item.floorName,1);
					}	
					this.getRooms(item.id);
				},
				// 
				gotodeatils(item){
					if(this.$store.state.state&&this.$store.state.isphone){
						getApp().globalData.TTSSpeaker.stop();
						getApp().globalData.TTSSpeaker.speak('房间'+item.roomName+'昨日累计查房'+item.yesterdayCheckCount+'次，本月累计查房'+item.curMonthCheckCount+'次；',1);
					}	
					let voice  = item.floorName +item.roomName
					uni.navigateTo({
						url:'./detail?roomName='+item.roomName+'&roomId='+item.id
					})
				}
		}
	}
</script>
<style scoped lang="scss">
	.no-data{
		background-color: #FFFFFF;
		padding: 30rpx;
		.inner{
			color: #666;
			justify-content: center;
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}
	}
	
	page{
		background-color: #FFFFFF;
		height:100%;
	}
	.scroll_inner{
		height:100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.scroll-outer{
		display: flex;
		height:100%;
	}
	.scroll{
		background-color: #F2F2F2;
		flex: 1;
	}
	.changeColor{
		background-color:#FFFFFF;
	}
	
	.scroll_rig{
		background-color:#FFFFFF;
		display: flex;
		flex-direction: column;
		flex: 2;
		padding: 0 20rpx;
		width: 100%;
		height:100%;
		.person_img{
			image{
				width:120rpx;
				height: 120rpx;
			}
		}
		.person_rig{
			margin-left:20rpx;
			display: flex;
			flex:1;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #DDDDDD;
		}
		.person_bt{
			font-size:28rpx;
			.right{
				margin-right: 12rpx;
			}
		}
		.person_tp{
			height: 100%;
			padding-bottom: 6rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
		}	
	}
	.person_icon{
		text{
			font-size:40rpx;
		}
	}
	.cu-tag{
		height: 36rpx;
		margin: 0 15rpx;
	}
	.scroll_rig_inner{
		padding: 20rpx 0;
		display: flex;
	}
	
</style>
